<template>
    <c-dialog v-model:show="dialogFlag" v-if="dialogFlag" :title="title" @confirm="addUser" @close="close"
        :btnDisabled="type == 3" width="80%">
        <br/>
        <el-form ref="userForm" :model="formData" label-width="100px">
            <el-form-item label="图片" prop="imageUrl">
                <upload-image ref="eleUpload" :immediately="false" v-model="formData.imageUrl"/>
            </el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input v-model="formData.title" :disabled="type == 3" />
            </el-form-item>
            <el-form-item label="所属栏目" prop="categoryId">
                <category v-model="formData.categoryId" idLike="11" :returnLast="true" width="100%" @onChange="getSlData"/>
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <my-wangeditor v-if="showEditor" v-model="formData.content" width="100%"/>
            </el-form-item>
            
        </el-form>
    </c-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import cDialog from '@/components/custom/cDialog.vue'
import { message } from '@/utils/element'
import {saveNews} from '@/api/station'
import myWangeditor from "@/components/custom/myWangeditor.vue"
import uploadImage from "@/components/custom/UploadImgForStream.vue"
import category from "@/components/custom/category.vue"

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: String,
    editData: Object,
    type: Number // 操作类型：1为新增，2为编辑，3为查看
})
const emit = defineEmits(['update:show', 'success'])
const formData = ref({})
const showEditor = ref(false)
onMounted(() => {
    if (props.type == 2 || props.type == 3) {
        formData.value = props.editData
     
    }
    showEditor.value = true
})


const userForm = ref(null)
const eleUpload = ref(null)
const dialogFlag = ref(props.show)

const addUser = async () => {
    
    if(!formData.value.title) {
        return message('请输入标题',3)
    }else if(!formData.value.content){
        return message('请输入内容',3)
    }
    await eleUpload.value.uploadFile() // 上传图片
    let res = ''
    res = await saveNews(formData.value)
    if(props.type==1){ // 新增
        //res = await saveNews(formData.value)
    }else if(props.type==2){ // 编辑
        //res = await editAccount(formData.value)
    }
    if(res.code == 0){
        message('数据提交成功',2)
        emit('success')
        close()
    }else{
        message(res.msg,3) 
    }
 
}

const getSlData = arr =>{
    console.log("EEEE:",arr)
    //formData.value.topCategoryId = arr[0].id  // 顶级栏目（一级）
    if(arr && arr.length>0){
        formData.value.categoryName = arr[arr.length-1].name
    }
    
}

const close = () => {
    emit('update:show', false)
}
</script>
<style lang="scss" scoped>
.mytips {
    font-size: 12px;
    color: #999;
}

.myitembox {
    display: flex;
    width: 100%;

    .myipitem {
        flex: 1;
    }

    .icontips {
        display: flex;
        padding: 0 0 0 4px;
        align-items: center;
    }
}
</style>
<style lang="scss">
.userFormItem {
    &.el-form-item--default {
        margin-bottom: 0;
    }
}
</style>